import './LeftSongBox.scss'
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Button } from 'antd';
import { getSongDetail, getLyric } from '../../../api';
import CommentModule from '../../CommentModule.jsx'
import {
  DownOutlined,
  UpOutlined,
} from '@ant-design/icons';

export default class LeftSongBox extends Component {
  constructor(){
    super()
    this.state = {
      str:'',
      isOpen: false,
      songs:{
        al:{
          picUrl:''
        },
        name:'',
        ar:[]
      },
      lyric:''
    }
  }
  componentDidMount() {
    getSongDetail({ids:this.props.id}).then(({data})=>{
      console.log(data.songs[0])
      this.setState({songs:data.songs[0]})
    })
    getLyric({id:this.props.id}).then(({data})=>{
      let str = data.lrc.lyric
      let str2 = str.replace(/\n/g,'<br />')
      let str3 = str2.replace(/\[[^[\]]*\]/g,'')
      this.setState({lyric:str3})
    })
  }
  openLyric () {
    this.setState({isOpen:!this.state.isOpen})
  }
  render() {
    let {songs} = this.state
    return (
      <div data-11111='left_song_box'>
        <div className="left_song_box_top">
          <div className="cd_img">
            {songs.al.picUrl!==''&&(<img src={songs.al.picUrl} alt="" />)} 
          </div>
          <div className="song_detail_box">
            <div className="title"><span></span>{songs.name}</div>
            <div className="singer">歌手：
            {
              songs.ar.map((item)=>{
                return(
                  <span key={item.id}><Link to=''>{item.name}</Link> <span className="fenge"> / </span></span>
                )
              })
            }
            </div>
            <div className="singer">所属专辑：{songs.al.name}</div>
            <div className="fun_container">
            <Button icon={<span className="iconfont icon-bofang" />}>
              播放
            </Button>
            <Button icon={<span className="iconfont icon-jia" />}>
            </Button>
            <Button icon={<span className="iconfont icon-tianjiawenjian" />}>
              收藏
            </Button>
            <Button icon={<span className="iconfont icon-fenxiang" />}>
              分享
            </Button>
            <Button icon={<span className="iconfont icon-xiazai_" />}>
              下载
            </Button>
            <Button icon={<span className="iconfont icon-duihua-2" />}>
              (4939)
            </Button>
            </div>
            <div className="lyric" dangerouslySetInnerHTML={{__html:this.state.lyric}} style={{height:this.state.isOpen?'auto':'320px'}}>
            </div>
            {
              this.state.isOpen?(<div className="open" onClick={this.openLyric.bind(this)}><span className='text'>收起</span><UpOutlined /></div>)
              :<div className="open" onClick={this.openLyric.bind(this)}><span className='text'>展开</span><DownOutlined /></div>
            }
          </div>
        </div>
        <div>
          <CommentModule id={this.props.id} type={0} />
        </div>
      </div>
    )
  }
}
